<template>
	<view class="wrap">
		<view class="content">
			<u-form :model="form" ref="uForm">
				<view v-if="step==1">
					<view class="step_title">
						<u-divider fontSize=35 border-color="#ffffff" bg-color="#7a96fa" color="#ffffff">一、基本信息</u-divider>
					</view>
					<view class="form_content">
						<u-form-item :label-position="labelPosition" label="农高区名称:" label-width="180">
							<u-input v-model="form.mc" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="所在县市:" prop="region" label-width="150">
							<u-input :border="border" type="select" :select-open="pickerShow" v-model="form.xs" placeholder="请选择地区" @click="pickerShow = true"></u-input>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="通讯地址:" label-width="150">
							<u-input v-model="form.dz" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="邮编:" label-width="150">
							<u-input v-model="form.yb" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="联系人,联系电话:" label-width="230">
							<u-input v-model="form.dh" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="传真:" label-width="150">
							<u-input v-model="form.cz" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="E-mail:" label-width="150">
							<u-input v-model="form.em" />
						</u-form-item>
						<view>
							<u-button type="primary" style="background-color: #7a96fa;margin-top: 40rpx;" @tap="nextStep()">下一步</u-button>
						</view>
					</view>
				</view>
				<view v-if="step==2">
					<view class="step_title">
						<u-divider fontSize=35 border-color="#ffffff" bg-color="#7a96fa" color="#ffffff">二、总体建设规模情况</u-divider>
					</view>
					<view class="form_content">
						<u-form-item :label-position="labelPosition" label="实际管理面积:" label-width="190">
							<u-input v-model="form.N01" />
							<view>平方公里</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="当年总投入:" label-width="190">
							<u-input v-model="form.N02" />
							<view>千元</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="其中：当年研发投入:" label-width="300" style="padding-left: 40rpx;">
							<u-input v-model="form.N03" />
							<view>千元</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="财政总支出:" label-width="190">
							<u-input v-model="form.N04" />
							<view>千元</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="其中：财政科技支出:" label-width="300" style="padding-left: 40rpx;">
							<u-input v-model="form.N04_1" />
							<view>千元</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="园区管委会级别:" label-width="230">
							<u-input v-model="form.N05" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="管委会人员数:" label-width="200">
							<u-input v-model="form.N06" />
							<view>个</view>
						</u-form-item>
						<view style="padding: 0;">
							<u-row gutter="16">
								<u-col span="6">
									<u-button type="info" style="margin-top: 40rpx;" @tap="preStep()">上一步</u-button>
								</u-col>
								<u-col span="6">
									<u-button type="primary" style="background-color: #7a96fa;margin-top: 40rpx;" @tap="nextStep()">下一步</u-button>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>

				<view v-if="step==3">
					<view class="step_title">
						<u-divider fontSize=35 border-color="#ffffff" bg-color="#7a96fa" color="#ffffff">三、产业发展情况</u-divider>
					</view>
					<view class="form_content">
						<u-form-item :label-position="labelPosition" label="工商注册企业数:" label-width="220">
							<u-input v-model="form.N07" />
							<view>个</view>
						</u-form-item>

						<u-form-item :label-position="labelPosition" label="其中：高新技术企业数:" label-width="300" style="padding-left: 40rpx;">
							<u-input v-model="form.N07_1" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="其中：涉农高新技术企业数:" label-width="360" style="padding-left: 80rpx;">
							<u-input v-model="form.N07_1_1" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="省部级以上龙头企业数:" label-width="300" style="padding-left: 40rpx;">
							<u-input v-model="form.N07_2" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="“三品一标”数:" label-width="190">
							<u-input v-model="form.N08" />
							<view>个</view>
						</u-form-item>
						<view>
							<view style="padding: 0;">
								<u-row gutter="16">
									<u-col span="6">
										<u-button type="info" style="margin-top: 40rpx;" @tap="preStep()">上一步</u-button>
									</u-col>
									<u-col span="6">
										<u-button type="primary" style="background-color: #7a96fa;margin-top: 40rpx;" @tap="nextStep()">下一步</u-button>
									</u-col>
								</u-row>
							</view>
						</view>
					</view>
				</view>

				<view v-if="step==4">
					<view class="step_title">
						<u-divider fontSize=35 border-color="#ffffff" bg-color="#7a96fa" color="#ffffff">四、创新资源集聚情况</u-divider>
					</view>
					<view class="form_content">
						<u-form-item :label-position="labelPosition" label="省部级以上研发机构数:" label-width="300">
							<u-input v-model="form.N09" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="创新创业服务机构数:" label-width="280">
							<u-input v-model="form.N10" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="孵化器面积:" label-width="180">
							<u-input v-model="form.N11" />
							<view>平方米</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="在孵企业数:" label-width="180">
							<u-input v-model="form.N12" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="产学研合作单位数:" label-width="250">
							<u-input v-model="form.N13" />
							<view>个</view>

						</u-form-item>
						<u-form-item :label-position="labelPosition" label="从业人员数:" label-width="200">
							<u-input v-model="form.N14" />
							<view>人</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="其中：企业与研发机构R&D人员数:" label-width="450" style="padding-left: 40rpx;">
							<u-input v-model="form.N14_1" />
							<view>人</view>
						</u-form-item>
						<view style="padding: 0;">
							<u-row gutter="16">
								<u-col span="6">
									<u-button type="info" style="margin-top: 40rpx;" @tap="preStep()">上一步</u-button>
								</u-col>
								<u-col span="6">
									<u-button type="primary" style="background-color: #7a96fa;margin-top: 40rpx;" @tap="nextStep()">下一步</u-button>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>

				<view v-if="step==5">
					<view class="step_title">
						<u-divider fontSize=35 border-color="#ffffff" bg-color="#7a96fa" color="#ffffff">五、成果产出情况</u-divider>
					</view>
					<view class="form_content">
						<u-form-item :label-position="labelPosition" label="累计授权发明专利数:" label-width="300">
							<u-input v-model="form.N15" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="引进新品种、新产品、新技术、新设施数:" label-width="530">
							<u-input v-model="form.N16" />
							<view>个</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="推广新品种、新产品、新技术、新设施数:" label-width="530">
							<u-input v-model="form.N17" />
							<view>个</view>
						</u-form-item>
						<view style="padding: 0;">
							<u-row gutter="16">
								<u-col span="6">
									<u-button type="info" style="margin-top: 40rpx;" @tap="preStep()">上一步</u-button>
								</u-col>
								<u-col span="6">
									<u-button type="primary" style="background-color: #7a96fa;margin-top: 40rpx;" @tap="nextStep()">下一步</u-button>
								</u-col>
							</u-row>
						</view>
					</view>
				</view>

				<view v-if="step==6">
					<view class="step_title">
						<u-divider fontSize=35 border-color="#ffffff" bg-color="#7a96fa" color="#ffffff">六、主要经济指标</u-divider>
					</view>
					<view class="form_content">
						<u-form-item :label-position="labelPosition" label="总产值:" label-width="120">
							<u-input v-model="form.N18" />
							<view>千元</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="其中：涉农高新技术企业产值:" label-width="390" style="padding-left: 60rpx;">
							<u-input v-model="form.N18_1" />
							<view>千元</view>
						</u-form-item>
						<u-divider bg-color='#f3f4f9'>园区的主导产业</u-divider>

						<u-form-item :label-position="labelPosition" label="主导产业产值:" label-width="200">
							<u-input v-model="form.N19" />
							<view>千元</view>
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="利润总额:" type="number" label-width="160">
							<u-input v-model="form.N20" />
							<view>千元</view>
						</u-form-item>
						<u-divider bg-color='#f3f4f9' color="red">填表人信息</u-divider>
						
						<u-form-item :label-position="labelPosition" label="单位负责人:" type="text" label-width="160">
							<u-input v-model="form.dwfzr" />
						</u-form-item>
						<u-form-item :label-position="labelPosition" label="填表人:" type="text" label-width="160">
							<u-input v-model="form.dwfzr" />
						</u-form-item>
					
						<view style="padding: 0;">
							<u-row gutter="16">
								<u-col span="6">
									<u-button type="info" style="margin-top: 40rpx;" @tap="preStep()">上一步</u-button>
								</u-col>
								<u-col span="6">
									<u-button type="primary" style="background-color: #7a96fa;margin-top: 40rpx;" @tap="submit()">确认提交</u-button>
								</u-col>
							</u-row>
						</view>
					</view>
					
				</view>
			</u-form>
			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'left',
				border: false,
				pickerShow: false,
				step: 1,
				form: {
					mc: '',
					xs: '',
					dz: '',
					yb: '',
					dh: '',
					cz: '',
					em: '',
					N01: '',
					N02: '',
					N03: '',
					N04: '',
					N04_1: '',
					N05: '',
					N06: '',
					N07: '',
					N07_1: '',
					N07_1_1: '',
					N07_2: '',
					N08: '',
					N09: '',
					N10: '',
					N11: '',
					N12: '',
					N13: '',
					N14: '',
					N14_1: '',
					N15: '',
					N16: '',
					N17: '',
					N18: '',
					N18_1: '',
					N19: '',
					N20: '',
				}

			}
		},
		methods: {
			// 选择地区回调
			regionConfirm(e) {
				this.form.xs = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			nextStep() {
				if (this.step != 6) {
					this.step = this.step + 1;
					console.log(this.step)
				}
			},
			preStep(){
				if (this.step != 1) {
					this.step = this.step - 1;
				}
			},
			submit(){
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
	.wrap {
		background-color: #f8f8f8;
	}

	.content {
		background-color: #ffffff;
	}

	.step_title {
		background-color: #7a96fa;
		height: 200rpx;
		padding-top: 80rpx;
	}

	.form_content {
		padding: 30rpx;
		background-color: #f3f4f9;
		padding-bottom: 100rpx;

	}
</style>
